1
00:00:00,730 --> 00:00:07,870
ตกลง ตอนนี้เรามีตัวอย่างคอลเลกชันแล้ว เราต้องเริ่มสร้างรายการเมนูของเรา

2
00:00:07,870 --> 00:00:18,760
ส่วนประกอบ เพื่อให้เรารู้ว่าส่วนประกอบรายการเมนูของเราจะประกอบด้วยรูปภาพและชื่อเรื่อง

3
00:00:19,120 --> 00:00:23,890
ราคาและปุ่มนี้ที่ช่วยให้เราสามารถเพิ่มลงในรถเข็นได้

4
00:00:24,710 --> 00:00:29,620
ตอนนี้เราจะไม่เพิ่มฟังก์ชันการทำงานใดๆ ในตอนนี้

5
00:00:29,890 --> 00:00:32,950
เรายังไม่ได้พิจารณาวิธีจัดการกับรถเข็นของเราจริงๆ

6
00:00:33,730 --> 00:00:37,060
แต่เรามาสร้างส่วนประกอบนี้กันก่อน

7
00:00:37,900 --> 00:00:43,330
เรามาเพิ่มรายการคอลเลกชันเข้าไปในส่วนประกอบของเรากันดีกว่า

8
00:00:44,660 --> 00:00:50,500
และในโฟลเดอร์ของเรา เราจะทำสิ่งเดียวกันกับที่เราทำส่วนประกอบรายการคอลเลกชันของเรา

9
00:00:51,830 --> 00:01:02,600
จากนั้นรูปแบบจุดรายการคอลเลกชันของเราที่ถามเรา ยิ่งคุณพิมพ์สิ่งนี้มากเท่าไร คุณก็จะยิ่งดีขึ้นเท่านั้น

10
00:01:02,600 --> 00:01:02,840
ที่มัน

11
00:01:03,650 --> 00:01:10,070
ซึ่งสิ่งที่น่าสนใจอยู่เสมอก็คือ ในตอนแรกมันมักจะดูซ้ำซากนิดหน่อยเสมอ แต่

12
00:01:10,460 --> 00:01:17,570
จริงๆ แล้วคุณจะพบว่าคุณจำทุกอย่างได้จริงๆ และจุดประสงค์ของมันก็ยิ่งมากขึ้นเท่านั้น

13
00:01:17,570 --> 00:01:22,730
คุณฝึกพิมพ์โครงสร้างโฟลเดอร์เดียวกันสำหรับส่วนประกอบของคุณและจะทำอย่างไรกับส่วนประกอบเหล่านั้น

14
00:01:23,380 --> 00:01:26,240
ตกลง ตอนนี้สำหรับรายการคอลเลกชันของเรา

15
00:01:26,540 --> 00:01:32,660
เรารู้ว่าเราต้องการบางสิ่งเพื่อทำให้รายการเมนูของเราเป็นที่นิยม แต่เราไม่ต้องการ

16
00:01:32,660 --> 00:01:33,260
รัฐใดก็ได้

17
00:01:33,620 --> 00:01:36,830
เรามาสร้างองค์ประกอบที่ใช้งานได้อีกอันกัน

18
00:01:37,670 --> 00:01:43,970
ดังนั้นรายการคอลเลกชัน CONSED จึงเท่ากับองค์ประกอบการทำงานนี้

19
00:01:45,520 --> 00:01:48,640
ส่งกลับ Divx นี้พร้อมกับชื่อคลาสของเรา

20
00:01:50,210 --> 00:01:56,150
รายการคอลเลกชัน จากนั้นเราจะให้ div แก่มัน

21
00:01:57,190 --> 00:02:04,470
และตอนนี้ Divx จะเก็บภาพของเราไว้ ดังนั้นเรามาตั้งชื่อคลาสของภาพกันก่อนดีกว่า

22
00:02:06,020 --> 00:02:07,190
และขอ

23
00:02:08,250 --> 00:02:15,630
ทำแบบเดียวกับที่เราทำก่อนหน้านี้กับรายการไดเร็กทอรีของเรา ดังนั้นเราจึงรู้ว่าเรากำลังทำอะไรอยู่

24
00:02:15,630 --> 00:02:17,580
ที่จะผ่านเข้าไปจะเป็น

25
00:02:18,600 --> 00:02:20,550
เราก็จะได้ชื่อของเราด้วย

26
00:02:21,700 --> 00:02:25,750
เราจะได้ราคาและ URL รูปภาพของเรา และเรามีทั้งหมดนี้

27
00:02:26,820 --> 00:02:34,920
เมื่อเรานำข้อมูลนั้นเข้ามาก่อนหน้านี้ในคอลเลกชันของเรา หรือขออภัยในหน้าร้านของเรา ในร้านของเรา

28
00:02:34,920 --> 00:02:39,960
ข้อมูลโดยเฉพาะ ดังนั้นเราจึงต้องมีชื่อ ID รูปภาพ และราคา

29
00:02:41,880 --> 00:02:44,370
ตอนนี้เรากำลังจะไป.

30
00:02:46,740 --> 00:02:54,510
ใส่สิ่งที่เราเคยทำก่อนหน้านี้ด้วยสไตล์ของเราแล้วเราจะทำภาพพื้นหลังให้เข้ากับสตริงของเรา

31
00:02:54,510 --> 00:02:57,150
ค่าประมาณค่าของ

32
00:02:58,470 --> 00:02:59,950
รูปภาพคุณเอิร์ล

33
00:03:01,590 --> 00:03:08,930
ตอนนี้ยังไม่มีอะไรใหม่ จากนั้นเราจะเพิ่มอีก d'Hiv และที่นี่เราจะเพิ่ม

34
00:03:08,940 --> 00:03:10,440
คอลเลกชันของเราสำหรับ

35
00:03:11,500 --> 00:03:11,920
ตอนนี้.

36
00:03:13,020 --> 00:03:14,190
ภายใน Futter ของเรา

37
00:03:15,630 --> 00:03:22,710
เรามีการทำซ้ำสองครั้ง จริงๆ แล้ว เราไม่ต้องการแท็กปิดนี้ด้วยซ้ำ เราจะนำมันมา

38
00:03:22,710 --> 00:03:27,960
ในช่วงของเราซึ่งจะเป็นชื่อของเรา

39
00:03:29,100 --> 00:03:32,040
รวมทั้งของเราด้วย

40
00:03:35,430 --> 00:03:36,000
สุดยอด.

41
00:03:36,070 --> 00:03:39,530
ตกลง ตอนนี้เรามาส่งออกสิ่งนี้กัน

42
00:03:41,740 --> 00:03:47,140
และนำดาวที่เรามีสำหรับองค์ประกอบนี้เข้ามา ดังนั้นฉันจึงเขียนมันให้เราแล้ว

43
00:03:47,140 --> 00:03:49,900
แต่เราสามารถดูได้อย่างรวดเร็วว่ามันคืออะไร

44
00:03:53,200 --> 00:03:59,150
ภายในรายการคอลเลกชันของเรา เรากำลังจัดแต่งภาพให้มีความสูงเก้าสิบห้าเปอร์เซ็นต์

45
00:03:59,950 --> 00:04:05,980
นั่นหมายความว่าคอลเลกชันภาพถ่ายของเราจะมีความสูงเท่ากับ 5 เปอร์เซ็นต์ของความสูงทั้งหมดของเรา

46
00:04:05,980 --> 00:04:08,380
รายการคอลเลกชันซึ่งจะมีขนาด 350 พิกเซล

47
00:04:09,470 --> 00:04:14,510
นี่จะเป็นเลย์เอาต์สำหรับส่วนประกอบจริงของเรา ซึ่งสิ่งที่เราเห็นตรงนี้

48
00:04:16,050 --> 00:04:23,760
สิ่งสำคัญอย่างหนึ่งที่ควรทราบก็คือคอลัมน์ของ Fleck ในรายการคอลเลกชันของเราจะอนุญาตเป็นหลัก

49
00:04:23,760 --> 00:04:27,510
Futter ของเราและภาพของเราให้นั่งในแนวตั้ง

50
00:04:27,700 --> 00:04:28,080
ขวา.

51
00:04:29,130 --> 00:04:35,250
จากนั้นคอลเลกชันของเรา Futter ก็เป็นเพียงส่วนแสดงผลปกติของเรา จากนั้นเราก็มีช่องว่างระหว่างกัน

52
00:04:35,250 --> 00:04:43,530
เพื่อให้เนื้อหาของเราถูกแยกออกจากกัน ชื่อเรื่องของเราใช้พื้นที่ถึง 90 เปอร์เซ็นต์ของพื้นที่ทั้งหมดของเรา

53
00:04:43,530 --> 00:04:46,340
ส่วนท้ายแล้วราคาจะเท่ากับ 10 เปอร์เซ็นต์

54
00:04:46,350 --> 00:04:52,170
ดังนั้นเนื่องจากราคาของเราไม่น่าจะเติบโตมากขนาดนั้น เราจึงต้องแน่ใจว่าจะมีราคาของเรา

55
00:04:52,170 --> 00:04:54,720
ชื่อใช้พื้นที่ส่วนใหญ่ที่นี่

56
00:04:56,140 --> 00:04:56,680
ตกลง.

57
00:04:57,580 --> 00:05:07,600
ตอนนี้หากเรานำเข้ารายการคอลเลกชันของเราไปยังหน้าตัวอย่างคอลเลกชันของเราเพื่อให้เราสามารถเข้าถึงได้

58
00:05:08,760 --> 00:05:10,950
รายการคอลเลกชันใหม่ที่เราเขียน

59
00:05:15,370 --> 00:05:25,030
ตอนนี้เราทำได้ แทนที่จะทำสิ่งกระตุ้น แค่แมปมันแบบนั้น และเพราะเราต้องการคุณสมบัติ

60
00:05:25,030 --> 00:05:30,220
ในรายการที่เรามีก่อนหน้านี้ เราก็แค่จะทำสิ่งที่เราทำก่อนหน้านี้

61
00:05:31,410 --> 00:05:37,920
และเราจะปรับโครงสร้าง I.D. ของเราใหม่ แต่เราจะปรับโครงสร้างส่วนที่เหลือของรายการด้วย

62
00:05:37,920 --> 00:05:43,020
อุปกรณ์ประกอบฉากและส่งต่อเช่นนั้น

63
00:05:44,030 --> 00:05:46,430
มาทำอุปกรณ์ประกอบฉากไอเท็มอื่นกันดีกว่า

64
00:05:48,280 --> 00:05:48,670
WAP

65
00:05:49,650 --> 00:05:52,080
และตอนนี้มันไม่ใช่ div อีกต่อไป

66
00:05:54,580 --> 00:06:01,480
แค่ให้แน่ใจว่าได้จัดโครงสร้าง D หรือกระจายอุปกรณ์ประกอบฉากไอเท็มอื่น ๆ ของเราไปยังไอเท็มคอลเลกชันของเรา

67
00:06:03,460 --> 00:06:06,250
โอ้ เราต้องเริ่มดูตัวอย่างคอลเลกชันด้วย

68
00:06:08,320 --> 00:06:11,020
สไตล์เหล่านั้นอยู่ข้างล่างนี้

69
00:06:14,610 --> 00:06:16,250
ตกลงไปกันแล้ว

70
00:06:17,310 --> 00:06:22,800
เราก็มีราคาของเรา เราก็มีของเรา เพราะไม่มีสไตล์เข้ามา ลองตรวจสอบดู

71
00:06:22,800 --> 00:06:24,960
อย่างรวดเร็วและดูว่าเราขาดอะไรไปหรือไม่

72
00:06:25,380 --> 00:06:31,260
ดังนั้นในขณะที่คุณเขียนโค้ด คุณอาจเห็นสิ่งนี้เกิดขึ้น คุณเพียงต้องการให้แน่ใจว่าการตั้งชื่อของเราถูกต้อง

73
00:06:31,260 --> 00:06:33,150
สำหรับทุกสิ่ง และเราก็ได้รับปากกาสไตลัส

74
00:06:33,870 --> 00:06:37,470
เลยไม่เห็นดาวที่เราเขียนมาประยุกต์ที่นี่

75
00:06:39,210 --> 00:06:45,450
แม้ว่าเราจะได้รับภาพจริงที่นี่ที่ถูกเรนเดอร์เช่นนั้น

76
00:06:47,700 --> 00:06:52,550
โอ้ ฉันเห็นคอลเลกชันก่อนหน้าของเรา รายการคอลเลกชันของเรา

77
00:06:54,070 --> 00:06:55,390
โอ้เราไม่ได้บันทึก

78
00:06:58,230 --> 00:06:59,130
ความผิดพลาดโง่ๆ

79
00:06:59,820 --> 00:07:08,100
ดังนั้นบางครั้งหากคุณแค่ดูภายในเครื่องมือ dev ของคุณ มันก็ง่ายมากที่จะดูว่าบางที

80
00:07:08,100 --> 00:07:14,760
เรากำลังผิดพลาดเพราะเรารู้แน่ เนื่องจากวิธีการตั้งค่าการตอบสนอง ทุกอย่างควรจะเป็น

81
00:07:14,760 --> 00:07:16,460
เข้ามาในเวลาที่กำหนด

82
00:07:16,470 --> 00:07:20,680
ดังนั้นหากไม่ได้โหลด เราอาจจะทำให้การนำเข้าของเราเสียหาย

83
00:07:20,700 --> 00:07:22,920
ใช่แล้ว ซึ่งเราตรวจสอบก่อน

84
00:07:22,930 --> 00:07:23,210
ขวา.

85
00:07:23,220 --> 00:07:27,060
เราทำให้แน่ใจว่าเราได้นำเข้ารายการคอลเลกชันที่ถูกต้องซึ่งเราเป็น

86
00:07:27,720 --> 00:07:31,620
จากนั้นเราตรวจสอบว่าเรามีชื่อเหมือนชื่อชั้นเรียนของเราหรือไม่

87
00:07:31,620 --> 00:07:32,070
ถูกต้อง.

88
00:07:32,520 --> 00:07:34,650
ซึ่งเราทำ.

89
00:07:35,580 --> 00:07:38,190
ปรากฎว่าเราไม่ได้บันทึกมันไว้

90
00:07:38,220 --> 00:07:41,580
มันจึงเป็นข้อผิดพลาดไร้สาระ แต่ก็มีข้อผิดพลาดมากมาย

91
00:07:41,580 --> 00:07:47,010
เมื่อคุณกลายเป็นนักพัฒนามืออาชีพ หลายครั้งคุณจะพบว่าคุณกำลังต่อสู้กับตัวเอง

92
00:07:47,010 --> 00:07:52,360
มุ่งหน้าพิงกำแพงเป็นเวลา 30 นาที แต่กลับพบว่าคุณพิมพ์ผิดเล็กน้อย

93
00:07:52,740 --> 00:07:58,440
เป็นเรื่องปกติมาก แต่เช่นนั้น ตอนนี้เรามีองค์ประกอบคอลเลกชันของเราแล้ว

94
00:08:00,220 --> 00:08:06,790
สิ่งเดียวที่เราขาดหายไปคือเอฟเฟกต์โฮเวอร์ด้วยปุ่มเพิ่ม แต่เราสามารถเพิ่มสิ่งนั้นได้ในเวลาเพียงเล็กน้อย

95
00:08:06,790 --> 00:08:12,150
ในภายหลังเมื่อเราสร้างรถเข็นของเราจริง ๆ เพราะนั่นคือสิ่งที่คุณลักษณะนั้นจะเชื่อมโยงกับ

96
00:08:12,850 --> 00:08:19,810
และอีกอย่างหนึ่งก่อนที่เราจะคอมมิตโค้ด เราควรเพิ่มการเสริมเล็กน้อยในภาพรวมของเรา

97
00:08:19,810 --> 00:08:24,090
โครงการเพื่อให้สอดคล้องกับสิ่งนี้มากขึ้น

98
00:08:24,550 --> 00:08:33,590
มาดูแอปของเรากันดีกว่า ความสำเร็จของ DOT และมาขยายขนาด 20 พิกเซลและ 80 พิกเซลกัน

99
00:08:34,240 --> 00:08:38,230
ฉันต้องการ 20 พิกเซลที่ด้านบนและด้านล่าง และ 80 พิกเซลที่ด้านข้าง

100
00:08:38,380 --> 00:08:39,160
และตอนนี้

101
00:08:40,100 --> 00:08:41,180
มันดูใกล้กว่า

102
00:08:42,240 --> 00:08:48,600
นี่อาจมากกว่าที่เรามีนิดหน่อย ลองทำให้เป็น 60 พิกเซลกันดีกว่า

103
00:08:52,320 --> 00:08:52,860
มันดีขึ้นมาก

104
00:08:53,220 --> 00:08:53,790
นั่นเป็นสิ่งที่ดีทีเดียว

105
00:08:54,480 --> 00:08:55,600
ตอนนี้เรามาคอมมิตโค้ดของเรากันดีกว่า

106
00:08:56,070 --> 00:08:57,360
กลับไปที่สถานีของเรากันเถอะ

107
00:08:58,580 --> 00:09:04,740
มาทำ get กันดีกว่า มาดูกันว่าเราต้องทำอะไรก่อน

108
00:09:05,030 --> 00:09:08,750
ตกลงแล้วเรามาลงมือทำกัน

109
00:09:10,570 --> 00:09:14,590
อัพเดทแอพของเราพร้อมหน้าร้านค้า

110
00:09:15,870 --> 00:09:21,810
คอลเลกชัน องค์ประกอบการแสดงตัวอย่าง และส่วนประกอบรายการคอลเลกชัน

111
00:09:23,010 --> 00:09:26,220
และตอนนี้เรามาเริ่มกันที่ push origin master

112
00:09:27,930 --> 00:09:29,590
ตกลง รหัสของเราขึ้นแล้ว

113
00:09:29,850 --> 00:09:31,050
ตอนนี้เรามาดูกันดีกว่า